<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
      [结合 013里看]

      Vue2 的 v-model 不支持 参数, 但是有个类似的玩法,是 v-bind 的 sync 修饰符


        v-bind:name.sync="sonName"    
        =>
        v-bind:name="sonName"
        v-on:update:name="sonName = $event"

        v-bind:age.sync="sonAge"
        =>
        v-bind:age="sonAge"
        v-on:update:age="sonAge = $event"

     -->
    <div id="app"></div>

    <script type="module">
      import Vue from "./lib/vue2.esm.browser.js";

      const app = new Vue({
        data() {
          return {
            sonName: "张三",
            sonAge: 18,
          };
        },

        template: `
          <Hello 
            :name.sync="sonName"
            :age.sync="sonAge"
            >
          </Hello>
        `,
      });

      Vue.component("Hello", {
        props: ["name", "age"],

        emits: ["update:name", "update:age"],

        template: `
          <div>
            <h2>Hello, 我是: {{ name }}, 年龄: {{ age }}</h2>
            <button @click="$emit('update:name', name + '~')">{{ name }}</button>
            <button @click="$emit('update:age', age + 1)">{{ age }}</button>
          </div>
        `,
      });

      app.$mount("#app");
    </script>
  </body>
</html>
